<template>
  <div class="index-page">
    <pageHead title='币码管理'></pageHead>
    <nav>
      <ul class="flex">
        <li
          v-for="(item, index) in tabs"
          :class="{on:cur==index}"
          :key="index"
          @click="tabClick(index)"
        ><i></i>{{item.text}}</li>
      </ul>
    </nav>
    <div
      class="main"
      v-if="cur == 0"
    >
      <div class="form">
        <div class="input">
          <div class="view clearfix">
            <span class="fl">排单币余额：</span>
            <p class="fl">84900</p>
            <i class="fr">个</i>
          </div>
        </div>
        <div class="input">
          <div class="view clearfix">
            <span class="fl">交易账号：</span>
            <input
              type="text"
              placeholder="请输入注册手机号或账号"
              class="fl"
            >
          </div>
        </div>
        <div class="input">
          <div class="view clearfix">
            <span class="fl">交易数量：</span>
            <input
              type="number"
              placeholder="请输入数量"
              class="fl"
            >
            <i class="fr">个</i>
          </div>
        </div>
        <div class="input">
          <div class="view clearfix">
            <span class="fl">二级密码：</span>
            <input
              type="text"
              placeholder="请输入交易密码"
              class="fl"
            >
          </div>
        </div>
      </div>
    </div>
    <div
      class="main"
      v-if="cur == 1"
    >
      <div class="form">
        <div class="input">
          <div class="view clearfix">
            <span class="fl">激活码余额：</span>
            <p class="fl">84900</p>
            <i class="fr">元</i>
          </div>
        </div>
        <div class="input">
          <div class="view clearfix">
            <span class="fl">交易账号：</span>
            <input
              type="text"
              placeholder="请输入注册手机号或账号"
              class="fl"
            >
          </div>
        </div>
        <div class="input">
          <div class="view clearfix">
            <span class="fl">交易数量：</span>
            <input
              type="number"
              placeholder="请输入数量"
              class="fl"
            >
            <i class="fr">个</i>
          </div>
        </div>
        <div class="input">
          <div class="view clearfix">
            <span class="fl">二级密码：</span>
            <input
              type="text"
              placeholder="请输入交易密码"
              class="fl"
            >
          </div>
        </div>
      </div>
    </div>
    <div class="btn">确定提交</div>
  </div>
</template>

<script>
import pageHead from '@/components/include/header'
export default {
  components: { pageHead },
  data () {
    return {
      tabs: [
        {
          text: '排单币'
        },
        {
          text: '激活码'
        }
      ],
      cur: 0
    }
  },
  activated: function () {},
  mounted: function () {},
  methods: {
    tabClick: function (e) {
      this.cur = e
    }
  },
  destroyed: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #f3f3f3;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  nav {
    ul {
      height: auto;
      li {
        flex: 1;
        text-align: center;
        font-size: 0.32rem;
        color: #313131;
        line-height: 1.2rem;
        height: 1.2rem;
        position: relative;
        i {
          width: 1.24rem;
          height: 0.05rem;
          position: absolute;
          top: 0.9rem;
          left: 50%;
          margin-left: -0.62rem;
        }
        &.on {
          i {
            background: #0192dd;
          }
        }
      }
    }
  }
  .form {
    .input {
      background: #fff;
      margin-top: 0.1rem;
      &:first-child {
        margin-top: 0;
      }
      .view {
        height: 1rem;
        line-height: 1rem;
        width: 6.9rem;
        margin-left: auto;
        margin-right: auto;
        span {
          width: 2.1rem;
          font-size: 0.3rem;
          color: #313131;
        }
        input {
          width: 4.45rem;
          height: 1rem;
          font-size: 0.3rem;
        }
        i {
          font-style: normal;
          font-size: 0.3rem;
          color: #313131;
        }
        p {
          font-size: 0.36rem;
          color: #29b15f;
        }
      }
    }
  }
  .btn {
    font-size: 0.3rem;
    color: #ffffff;
    text-align: center;
    width: 6rem;
    margin-left: auto;
    margin-right: auto;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #0192dd;
    border-radius: 0.5rem;
    margin-top: 0.6rem;
    cursor: pointer;
  }
}
</style>
